<template>
  <teleport to="body">
    <div aria-live="polite" class="f2-toast-layer">
      <!-- top row -->
      <div class="f2-stack f2-top-left">
        <NotificationToast
          v-for="n in byPos('top-left')"
          :key="n.id"
          :actions="n.actions"
          class="mb-2"
          :closeable="n.closeable"
          :icon="n.icon"
          :message="n.message"
          :title="n.title"
          :variant="n.variant"
          @close="close(n.id)"
        />
      </div>
      <div class="f2-stack f2-top-center">
        <NotificationToast
          v-for="n in byPos('top-center')"
          :key="n.id"
          :actions="n.actions"
          class="mb-2"
          :closeable="n.closeable"
          :icon="n.icon"
          :message="n.message"
          :title="n.title"
          :variant="n.variant"
          @close="close(n.id)"
        />
      </div>
      <div class="f2-stack f2-top-right">
        <NotificationToast
          v-for="n in byPos('top-right')"
          :key="n.id"
          :actions="n.actions"
          class="mb-2"
          :closeable="n.closeable"
          :icon="n.icon"
          :message="n.message"
          :title="n.title"
          :variant="n.variant"
          @close="close(n.id)"
        />
      </div>

      <!-- bottom row -->
      <div class="f2-stack f2-bottom-left">
        <NotificationToast
          v-for="n in byPos('bottom-left')"
          :key="n.id"
          :actions="n.actions"
          class="mt-2"
          :closeable="n.closeable"
          :icon="n.icon"
          :message="n.message"
          :title="n.title"
          :variant="n.variant"
          @close="close(n.id)"
        />
      </div>
      <div class="f2-stack f2-bottom-center">
        <NotificationToast
          v-for="n in byPos('bottom-center')"
          :key="n.id"
          :actions="n.actions"
          class="mt-2"
          :closeable="n.closeable"
          :icon="n.icon"
          :message="n.message"
          :title="n.title"
          :variant="n.variant"
          @close="close(n.id)"
        />
      </div>
      <div class="f2-stack f2-bottom-right">
        <NotificationToast
          v-for="n in byPos('bottom-right')"
          :key="n.id"
          :actions="n.actions"
          class="mt-2"
          :closeable="n.closeable"
          :icon="n.icon"
          :message="n.message"
          :title="n.title"
          :variant="n.variant"
          @close="close(n.id)"
        />
      </div>

      <!-- custom absolute notifications -->
      <div
        v-for="n in byPos('custom')"
        :key="n.id"
        class="f2-custom"
        :style="{ left: (n.x || 0) + 'px', top: (n.y || 0) + 'px' }"
      >
        <NotificationToast
          :actions="n.actions"
          :closeable="n.closeable"
          :icon="n.icon"
          :message="n.message"
          :title="n.title"
          :variant="n.variant"
          @close="close(n.id)"
        />
      </div>
    </div>
  </teleport>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import NotificationToast from '@/components/NotificationToast.vue'
import { notificationState, removeNotification } from '@/utils/notificationStore'

const items = computed(() => notificationState.items.filter(i => i.level === 'in-app'))

const byPos = (pos: Notify.NotificationPosition) => items.value.filter(i => i.position === pos)

function close(id: string) {
  removeNotification(id)
}
</script>

<style scoped>
.f2-toast-layer {
  position: fixed;
  inset: 0;
  pointer-events: none; /* allow clicks through except toasts */
  z-index: 9999;
}
.f2-stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.f2-top-left {
  top: 12px;
  left: 12px;
  align-items: flex-start;
}
.f2-top-center {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.f2-top-right {
  top: 12px;
  right: 12px;
  align-items: flex-end;
}
.f2-bottom-left {
  bottom: 12px;
  left: 12px;
  align-items: flex-start;
}
.f2-bottom-center {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.f2-bottom-right {
  bottom: 12px;
  right: 12px;
  align-items: flex-end;
}

.f2-custom {
  position: absolute;
  pointer-events: none;
}
.f2-custom > * {
  pointer-events: auto;
}
</style>
